<%@ page import="infomap.Recorrido; infomap.Usuario" %>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="layout" content="main" />
        <g:set var="entityName" value="${message(code: 'usuario.label', default: 'Usuario')}" />
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
            var directionDisplay;
            var directionsService = new google.maps.DirectionsService();
            var initialLocation = new google.maps.LatLng(-34.62, -58.43);
            var mapOptions = {
                    zoom: 12,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    center: initialLocation,
                };
            var map;

            function initialize() {
                directionsDisplay = new google.maps.DirectionsRenderer();
                map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
            }

            function calcRoute() {
                var start = document.getElementById("textoOrigen").value;
                var end = document.getElementById("textoDestino").value;
                var request = {
                    origin:start,
                    destination:end,
                    region:'ar',
                    travelMode: google.maps.DirectionsTravelMode.DRIVING
                };
                directionsService.route(request, function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setMap(map);
                        directionsDisplay.setDirections(response);
                        $('#errors_container').hide("slow");
                        $('#directions_container').hide("slow");
                        $('#name_container').show("slow");

                        saveSteps(response);
                    } else {

                        map.setOptions(mapOptions);
                        directionsDisplay.setMap(null);
                        $('#errors_container').show("slow");
                        $('puntos').remove();
                        document.getElementById("origen").value = "";
                        document.getElementById("destino").value = "";
                    }
                });
            }

            function saveSteps(directionResult) {
                document.getElementById("origen").value = document.getElementById("textoOrigen").value;
                document.getElementById("destino").value = document.getElementById("textoDestino").value;

                var myRoute = directionResult.routes[0].legs[0];

                $('<puntos></puntos>').appendTo('puntosIntermedios');

                for (var i = 0; i < myRoute.steps.length; i++) {
                    $('<input type="hidden" name="puntosIntermedios" value="'+ myRoute.steps[i].start_point + '" ></input>').appendTo('puntos');
                }
                $('<input type="hidden" name="puntosIntermedios" value="'+ myRoute.steps[myRoute.steps.length - 1].end_point + '" ></input>').appendTo('puntos');
            }


            function clean(){
                document.getElementById("textoOrigen").value = "";
                document.getElementById("textoDestino").value = "";
                map.setOptions(mapOptions);
                directionsDisplay.setMap(null);
                $('#errors_container').hide("slow");
                $('puntos').remove();
                document.getElementById("origen").value = "";
                document.getElementById("destino").value = "";
            }

            function cancelar(){
                $('puntos').remove();
                $('#name_container').hide("slow");
                $('#directions_container').show("slow");
            }

        </script>
    </head>
    <body>
        <g:if test="${flash.message}">
            <div class="message">${flash.message}</div>
        </g:if>

        <div class="map_container">
            <div id="map_canvas" ></div>
        </div>

        <div class="body">
            <div id="directions_container" >

                <div id="errors_container" style="display: none;">
                    <div class="errors_form">
                        <div class="errors">
                            Error. No se encontraron recorridos.
                        </div>
                    </div>
                </div>

                <div id="directions_form">
                    <h1>Ingrese las direcciones del recorrido:</h1>
                    <table class="userForm">
                        <tr class='prop'>
                            <td valign='top' class="name">
                                <label for='origen'>Origen:</label>
                            </td>
                            <td valign='top' class="value">
                                <input id="textoOrigen" type='text' name='textoOrigen' />
                            </td>
                        </tr>
                        <tr class='prop'>
                            <td valign='top' class="name">
                                <label for='destino'>Destino:</label>
                            </td>
                            <td valign='top' class="value">
                                <input id="textoDestino" type='text' name='textoDestino'/>
                            </td>
                        </tr>
                    </table>

                    <div class="buttons">
                        <input type="button" value="Calcular" onclick="calcRoute();"/>
                        <input type="button" value="Limpiar" onclick="clean();"/>
                    </div>
                </div>

            </div>

            <g:form  method="post">
                <g:hiddenField name="id" value="${usuarioInstance?.id}" />
                <g:hiddenField name="version" value="${usuarioInstance?.version}" />

                <input type="hidden" id="origen" name="origen"></input>
                <input type="hidden" id="destino" name="destino"></input>

                <puntosIntermedios></puntosIntermedios>

                <div id="name_container" style="display: none;">
                    <div class="name_form">
                        <h1>Ingrese un nombre para el recorrido:</h1>
                        <table class="userForm">
                            <tr class='prop'>
                                <td valign='top' class="name">
                                    <label for="nombre">Nombre:</label>
                                </td>
                                <td valign='top' class="value">
                                    <input id="nombre" type='text' name="nombre" />
                                </td>
                            </tr>
                        </table>

                        <div class="buttons">
                            <g:actionSubmit class="save" action="saveRecorrido" value="Guardar este recorrido" />
                            <input type="button" value="Cancelar" onclick="cancelar();"/>
                        </div>
                    </div>
                </div>
            </g:form>
        </div>

        <script type="text/javascript" language="javascript">
            initialize();
        </script>

    </body>
</html>
